<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>title</title>
    <style>
        /*两行有省略号的*/
        .aui-ellipsis-2 {
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        /*弹出的样式*/
        .myPicker{
            position: fixed;
            bottom: 0;
            -webkit-transform: translateY(400px);
            height: 390px;
            overflow-y:auto; 
            -webkit-transition:  .5s;
            transition:  .5s;
        }
        .pickAnimate{
            -webkit-transform: translateY(00px);
        }
        /*//垂直区域滚动*/
        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
        }

        #scroller {
            position: absolute;
        }  
        /*遮罩样式 */
        .mui-backdrop {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 998;
            background-color: rgba(0,0,0,.3);
        }
        /*红点样式*/
        .newMeg{
            position: relative;
        }
        .newMeg:after {
            content: "";
            position: absolute;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: red;
            right: 2px;
            top: 4px;
        }
    </style>
</head>
<body>
<input type="button" class="ss" value="单击" name="">
<input type="button" class="qx" value="取消" name="">


<div class="popHome ">
<div id="wrapper">
    <div id="scroller">
      <ul>
        <li>sdfsdfd</li>
        <li>sdfsdfd</li>
        <li>sdfsdfd</li>
        <li>sdfsdfd</li>
        <li>sdfsdfd</li>
        <li>sdfsdfd</li>
        <li>sdfsdfd</li>
      </ul>
    </div>  
</div>  
</div>

</body>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
/***************************垂直区域滚动****************************************/
$(function(){
    // 垂直区域滚动
    myscroll=new IScroll("#wrapper", { 
        probeType: 3, 
        mouseWheel: true,
        click:true 
    });
    // 水平滚动
    loadHorScroll ();
    $("#horScroll ul").width(getWidth());//设置下个宽度
})

/*************************水平滚动  还要计算宽度******************************************/
// 水平滚动  还要计算宽度
var myScroll;
function loadHorScroll () {
    myScroll = new IScroll('#horScroll', {
    scrollX: true,
    scrollY: false,
    mouseWheel: true ,
    vScroll: false,
    click:true,
    beforeScrollStart: function (e) {
           if ( this.absDistX > (this.absDistY + 5 ) ) {
               // user is scrolling the x axis, so prevent the browsers' native scrolling
               e.preventDefault();
           }
        }
   });
}
// 计算水平滚动的宽度 同样操作的是下个元素
function getWidth(){
    var height=0;
    $("#horScroll").find("li").each(function(){
        height+=$(this).outerWidth(true);
    }) 
    return height;
}


/***************************mui遮罩***********************************************/
// mui遮罩
var mask = mui.createMask(hidePicker);
// 显示遮罩
function showPicker(){
    mask.show();
    $(".popHome").addClass("pickAnimate");
}
// 关闭遮罩
function hidePicker(){
    $(".popHome").removeClass("pickAnimate");
}


</script>
</html>